<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Themes
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">
        <aside class="bd-sidebar sub-sidebar p-3">
            <nav class="bd-links" aria-label="Sub-section navigation">
                <div class="card">
                    <!-- <h6 class="card-header">Filter</h6> -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col">
                                <div class="mb-3 input-group flex-nowrap">
                                    <span ng-click="$ctrl.getThemes()" class="input-group-text" id="addon-wrapping"><i class="fas fa-search"></i></span>
                                    <input type="text" class="form-control" ng-model="$ctrl.themeRequest.keyword" ng-enter="$ctrl.getThemes()"
                                        placeholder="Search keywords..." aria-describedby="addon-wrapping" />
                                </div>
                                <div class="input-group mb-3">
                                    <!-- <label class="mb-2" for="customRange1">Sort by</label> -->
                                    <select class="form-select" ng-model="$ctrl.themeRequest.orderBy"
                                        ng-change="$ctrl.getThemes()">
                                        <option value="createdDatetime">Newest</option>
                                        <option value="additionalData.price">Price</option>
                                        <option value="additionalData.viewCount">Most popular</option>
                                        <option value="additionalData.installCount">Most installed</option>
                                    </select>
                                    <select class="form-select" ng-model="$ctrl.themeRequest.direction"
                                        ng-change="$ctrl.getThemes()">
                                        <option value="Desc">Descending</option>
                                        <option value="Asc">Ascending</option>
                                    </select>
                                </div>
                                <select class="form-select" ng-model="$ctrl.themeRequest.category" ng-change="$ctrl.getThemes()">
                                    <option selected value="">-- Categories --</option>
                                    <option ng-repeat="cate in $ctrl.categories" value="{{cate.obj.slug}}">
                                        {{cate.obj.title}}
                                    </option>
                                </select>
                                <!-- <div class="mb-3">
                    <label for="customRange1">Categories</label>
                </div> -->
                            </div>
                        </div>
                        <!-- <div class="mb-3">
                    <label for="customRange1">Price</label>
                    <input type="range" class="custom-range" id="customRange1">
                </div>
                <div class="mb-3">
                    <label for="customRange1">Rating</label>
                    <input type="range" class="custom-range" id="customRange1">
                </div> -->
                    </div>
                </div>
            </nav>
        </aside>
        <div class="content-body py-3 pe-3">
            <section class="mb-3 manual" ng-init="$ctrl.init()">
                <div class="row">
                    <div class="col-12">
                        <div ng-show="$ctrl.viewMode == 'list'" class="row" data-masonry='{"percentPosition": true }'>
                            <div ng-repeat="post in $ctrl.data.items track by $index" class="col-md-4">
                                <div class="card">
                                    <img class="card-img-top" src="{{post.thumbnailUrl}}"
                                        style="height: 150px; object-fit: cover;" />
                                    <div class="card-body">
                                        <h6 class="small mb-4">
                                            {{post.title}}
                                            <br />
                                            <small class="text-muted">by
                                                <b><a href="{{post.additionalData.authorUrl}}"
                                                        target="_blank">{{post.properties.authorName}}</a></b>
                                                in <b>{{post.additionalData.category}}</b></small>
                                        </h6>

                                        <!-- <div class="d-flex justify-content-left">
                                    <h5 class="text-success">
                                        $ {{ post.additionalData.price }}
                                    </h5>
                                </div> -->
                                        <div class="d-flex justify-content-between">
                                            <div class="col-12 justify-content-end text-end p-0">
                                                <a target="_blank" ng-click="$ctrl.preview(post)"
                                                    class="btn btn-sm btn-outline-secondary mr-1">Detail</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-show="$ctrl.viewMode == 'detail'" class="">
                            <div class="card card-sm">
                                <img class="card-img-top" src="{{$ctrl.current.thumbnailUrl | trustUrl}}"
                                    style="height: 40vh; object-fit: cover;" />
                                <div class="card-body">
                                    <h5 class="card-title">
                                        {{$ctrl.current.title}}
                                        <br />
                                        <small class="text-muted">by
                                            <b><a href="{{$ctrl.current.additionalData.authorUrl | trustUrl}}"
                                                    target="_blank">{{$ctrl.current.additionalData.authorName}}</a></b>
                                            in <b>{{$ctrl.current.additionalData.category}}</b></small>
                                    </h5>

                                    <!-- <div class="d-flex justify-content-left">
                                <h5 class="text-success">
                                    $ {{ $ctrl.current.additionalData.price }}
                                </h5>
                            </div> -->
                                    <div class="d-flex justify-content-between">
                                        <div class="col-5 p-0">
                                            <div class="progress" ng-if="$ctrl.current.progress">
                                                <div class="progress-bar progress-bar-striped bg-warning"
                                                    role="progressbar" style="width: {{$ctrl.current.progress}}%"
                                                    aria-valuenow="{{$ctrl.current.properties.avg_rating}}"
                                                    aria-valuemin="0" aria-valuemax="100"></div>
                                            </div>
                                            <small class="text-muted"
                                                ng-bind="$ctrl.current.additionalData.installStatus"></small>
                                        </div>
                                        <div class="col-7">
                                            <div class="mb-3 text-end justify-content-end">
                                                <a target="_blank" ng-click="$ctrl.back()"
                                                    class="btn btn-outline-secondary">Back</a>
                                                <!-- <google-pay ng-if="!$ctrl.current.canInstall" class="btn btn-sm mx-1"
                                        total-price="$ctrl.current.additionalData.price" total-price-status="'FINAL'"
                                        process-payment-data="processPaymentData(paymentData)"></google-pay> -->
                                                <a ng-if="$ctrl.current.canInstall"
                                                    ng-click="$ctrl.installTheme($ctrl.current.additionalData, $ctrl.current.id)"
                                                    target="_blank" class="btn btn-outline-primary"><i
                                                        class="fas fa-cloud-download-alt me-1"></i> Download</a>
                                                <a ng-if="$ctrl.current.additionalData.installStatus == 'downloading'"
                                                    class="spinner-border spinner-border-sm text-muted" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <hr /> -->
                                    <div class="row">
                                        <div class="col-md-12" ng-bind-html="$ctrl.current.content | trustHtml"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

    </div>
</div>